<template>
    <div id="channelT">
        <header>
            <div class="P_date">
                <span>时间：</span>
                <gDate @faithDate="faithDate"></gDate>
            </div>
            <div class="P_type">
                <div class="Choice">
                    <el-form ref="form">
                        <el-form-item label="小程序名称">
                            <el-cascader
                                :props=props
                                :options="options"
                                :v-model=selectedOptions
                                @change="handleChange">
                            </el-cascader>
                        </el-form-item>
                        <el-button @click="search">搜索</el-button>
                    </el-form>
                </div>
            </div>
        </header>
        <main>
            <el-table :data="tableData" border style="width: 100%" stripe>
                <el-table-column prop="createdate" label="日期"></el-table-column>
                <el-table-column prop="appname" label="小程序名称"></el-table-column>
                <el-table-column prop="channel_name" label="渠道名称"></el-table-column>
                <el-table-column prop="visitor_frequency" label="访客次数"></el-table-column>
                <el-table-column prop="visitor_person" label="访客人数"></el-table-column>
                <el-table-column prop="authorize_number" label="有效用户(授权)"></el-table-column>
                <el-table-column prop="onedayRemain" label="一日留存"></el-table-column>
                <el-table-column prop="twodayRemain" label="二日留存"></el-table-column>
                <el-table-column prop="fourdayRemain" label="四日留存"></el-table-column>
                <el-table-column prop="sevendayRemain" label="七日留存"></el-table-column>
                <el-table-column prop="fifteendayRemain" label="十五日留存"></el-table-column>
            </el-table>
            <div class="currPage">
                <el-pagination
                    layout="prev, pager, next"
                    :page-size=pageSize
                    :current-page=currentPage
                    @current-change="handleCurrentChange"
                    :total=total>
                </el-pagination>
            </div>
        </main>
    </div>
</template>
<script>
import gDate from '../G_Date/gdate'
import { iframe,addList,ModifyList,RemoteList,DataList,getChannel } from '@/assets/js'
export default {
    data(){
        return {
            selectedOptions:[],
            currentPage:1,//分页
            tableData:[],
            options:[],//联动菜单
            total:0,
            pageSize:2,
            props:{
                value: 'appid',
                label:"appname"
            },
            handleChangeData:[],//下拉
            TimeData:[]//时间
        }
    },
    methods:{
        faithDate:function(e){
            this.TimeData = e
        },
        handleChange:function(e){//触发下拉
            this.handleChangeData = e
        },
        search:function(){//搜索
            this.currentPage = 1
            console.log(123)
            console.log(this.currentPage)
            this.CurrData()
        },
        handleCurrentChange:function(e){//点击分页
        
            this.currentPage = e
            let appid = ''
            this.CurrData(appid,e)
        },
        CurrData:function(obj){//分页
            let data = {
                appid:this.handleChangeData[0]?this.handleChangeData[0]:'',
                cid:this.handleChangeData[1]?this.handleChangeData[1]:'',
                startTime:this.TimeData[0]?this.TimeData[0]:'',
                endTime:this.TimeData[1]?this.TimeData[1]:'',
                page:this.currentPage
            }
            DataList(this,data,'channel/channelCensusList')
        }
    },
    mounted:function(){
        
        this.CurrData()
        getChannel(this)
        setTimeout(()=>{
            // console.log(this.options)
            this.options.unshift( { appid:'', appname:'全部小程序' })
        },500)
    },
    components:{
        gDate
    }
}
</script>